<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
  <style type="text/css">
  .root{
      height: 130px;
      width: 800px;
      background-color: bisque;
      /* 垂直，从左到右 排版 非ie*/
      writing-mode: vertical-lr;
      /* 垂直，从左到右 排版 ie*/
      writing-mode: tb-lr;
 
  } 
  .child{
      float: left;
      border: 1px solid black;
      height: 24px;
      width:180px;
      margin: 2px;
      /* 非ie */
      writing-mode:horizontal-tb;
      /* ie */
      writing-mode: lr-tb;
  }
</style>
<script>
    
</script>
</head>

<body>
    <p>垂直流排版</p>
    <div class="root">
        <div class="child">child1</div>
        <div class="child" style="width:194px" >child2 长度超出</div>
        <div class="child">child3</div>
        <div class="child">child4</div>
        <div class="child">child5</div>
        <div class="child">child6</div>
        <div class="child">child7</div>
        <div class="child" style="width:174px">child8 长度不足</div>
        <div class="child">child9</div>
        <div class="child">child10</div>
        <div class="child">child11</div>
        <div class="child">child12</div>
        <div class="child">child13</div>
        <div class="child">child14</div>
        <div class="child">child15</div>
    </div>
    
    <div>相关语法</div>
    <div>CSS3</div>
    <pre>
        writing-mode: horizontal-tb;    默认值
            文本流是水平方向的
        writing-mode: vertical-rl; 
            文本是垂直方向的，阅读顺序从右向左(古诗的顺序)
        writing-mode: vertical-lr;
            文本垂直方向，阅读顺序从左到右(水平变成了垂直展示)
    </pre>
    <div>IE</div>
    <pre>
            IE的writing-mode多达11个，真正有用的记住两个就好了

            -ms-writing-mode: lr-tb;    初始值
                lr-tb对应的是CSS3语法中的horizontal-tb
            -ms-writing-mode: tb-rl;
                tb-rl对应的是CSS3语法中的vertical-rl
            -ms-writing-mode: tb-lr;
                tb-lr对应的是CSS3语法中的vertical-lr
            
    </pre>
</body>
</html>